﻿
<div class="example">
    <h2>@Title</h2>
    @if (Description is not null)
    {
        <p>@Description</p>
    }

    @*<Tab Position="TDesignBlazor.Position.Top" >
        <TabItem Title="效果" AdditionalStyle="@RunStyle">
            @RunContent
        </TabItem>
        <TabItem Title="代码">
            @CodeContent
        </TabItem>
    </Tab>*@


    <Div AdditionalCssClass="demo-wrapper">
        <Div AdditionalCssClass="content" AdditionalStyle="@RunStyle">
                @RunContent
        </Div>
        <Div class="footer">
            <Div class="btn">
                <Icon AdditionalCssClass="@BtnClass" Name="IconName.Code" Size="24px" @onclick="e=>ToogleCode()" />
            </Div>
        </Div>
        <Div class="@CodeClass" style="@GetStyle()">
            @CodeContent
            </Div>
    </Div>
</div>
@using ComponentBuilder
@code {

    [Parameter] public string Title { get; set; }
    [Parameter] public RenderFragment Description { get; set; }
    [Parameter] public RenderFragment CodeContent { get; set; }
    [Parameter] public RenderFragment RunContent { get; set; }
    [Parameter]public string? RunStyle{ get; set; }

    bool Active = false;

    string GetStyle() =>Active?"": "display:none";
    string CodeClass => HtmlHelper.CreateCssBuilder().Append("content code")
    //.Append(Active, "code-collapse", "code-expand")
    .ToString()
    ;

    string BtnClass => HtmlHelper.CreateCssBuilder().Append("action").Append("active", Active).ToString();

    void ToogleCode()
    {
        Active = !Active;
        StateHasChanged();
    }
}
